<template>
  <van-nav-bar fixed placeholder>
    <template #title>
      <van-search
        v-model="inputSearchValue"
        placeholder="请输入搜索关键词"
        @search="handleSearch"
      />
    </template>
  </van-nav-bar>
</template>

<script lang='ts'>
import { Options, Vue } from "vue-class-component";
import { Emit } from "vue-property-decorator";
@Options({
  components: {},
})
export default class NavBar extends Vue {
  //1. 触发search事件 获取这个inputSearchValue
  inputSearchValue: string = "";
  handleSearch = (): void => {
    this.$emit("sonSearch", this.inputSearchValue);
  };
}
</script>

<style scoped lang='less'>
:deep .van-nav-bar__title {
  width: 100%;
  max-width: 100%;
}
</style>